<html>
<head>
  <title>用户管理</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<script language="javascript" src="/static/js/jquery-3.5.1.min.js"></script>
	<script language="javascript" src="/static/js/import.js"></script>
  <style type="text/css">
		#toolbar{
			float: left;
		}
  </style>
  <script language="javascript">
		var delUser = function (id,name){
			Dialog.confirm({
				title:"删除确认",
				message:"是否确认删除用户："+name,
				callback:function (confirmed) {
					if(confirmed){
						$.ajax({type:"post",
							url:"/user/del.do",
							data:{id:id},
							success:function (result) {
								if(result.code == 200){
									$("#myTable").bootstrapTable("refresh");
									Message.success("删除成功！");
								}else {
									Message.danger(result.msg);
								}
						}});
					}
				}
			});
		};
		function showRoleModal(id){
			Dialog.detail({
				title: "用户授权",
				url:"/role/manage.htmlx?userId="+id,
				getDataMethod:"getSelectionRoles",
				callback:function (confirm,roles) {
					if(!confirm){
						return;
					}
					if(!roles||roles.length==0){
						Message.info("请选择需要授权的角色！");
						return;
					}
					var roleIds = [];
					roles.forEach(function (role) {
						roleIds.push(role.id);
					});
					$.ajax({
						url: "/user/addRole.do",
						type: "post",
						async: false,
						contentType: 'application/json',
						data: JSON.stringify({userId:id,roleIds:roleIds}),
						success: function (result) {
							if(result.code == 200){
								$("#myTable").bootstrapTable("refresh");
								Message.success("保存成功！");
							}else {
								Message.danger(result.msg);
							}
						}
					});
				}
			});
		};
		function onUserStatus(id){
			userStatus(id,1);
		}
		function offUserStatus(id){
			userStatus(id,2);
		}
		function userStatus(id,status){
			$.ajax({
				url: "/user/userStatus.do",
				type: "post",
				async: false,
				data: {id:id,status:status},
				success: function (result) {
					if(result.code == 200){
						$("#myTable").bootstrapTable("refresh");
					}else {
						Message.danger(result.msg);
					}
				}
			});
		}
	$(function(){
		$("#myTable").bootstrapTable({
			height: 690,
			url:"/user/queryWithPage.do",
			method: 'post',
			dataType: 'json',
			totalField: 'total',
			dataField: 'rows',
			pagination: true,
			sidePagination: 'server',
			clickToSelect: true,
			singleSelect: true,
			queryParams: function () {
				return {
					pageSize:this.pageSize,
					pageNumber:this.pageNumber,
					params:$("#queryForm").serializeJSON()
				};
			},
			columns:[
				{field: 'check',checkbox: true,align: 'center'},
				{title: '账号',field: 'username',align: 'center'},
				{title: '姓名',field: 'name',align: 'center'},
				{title: '密码',field: 'password',align: 'center'},
				{title: '性别',field: 'sex',align: 'center',
					formatter:function (value, row, index) {
						return value==1?'男':value==2?'女':value;
					}},
				{title: '角色',field: 'role',align: 'center'},
				{title: '身份证',field: 'idCard',align: 'center'},
				{title: '注册时间',field: 'createTime',align: 'center',
					formatter:function (value, row, index) {
						return value?$.format.date(value,"yyyy-MM-dd HH:mm:ss"):null;
					}
				},
				{title: '状态',field: 'status',align: 'center',
					formatter:function (value, row, index) {
						var off = '<i class="bi bi-toggle-off" style="font-size: 34px;cursor: pointer" onclick="onUserStatus('+row.id+')"></i>';
						var on = '<i class="bi bi-toggle-on" style="color: green;font-size: 34px;cursor: pointer" onclick="offUserStatus('+row.id+')"></i>';
						return value==1?on:off;
					}
				},
				{title: '操作',field: 'op',align: 'center',
					formatter: function (value, row, index) {
						var mod = '<button href="#" class="btn btn-warning m-1" onclick="window.parent.showUserDetail('+row.id+')">编辑</button>';
						var del = '<button href="#" class="btn btn-warning m-1" onclick="delUser('+row.id+',\''+row.name+'\')">删除</button>';
						var grant = '<button href="#" class="btn btn-warning m-1" onclick="showRoleModal('+row.id+')">授权</button>';
						return mod+del+grant;
					}
				}
			]
		});

		$("#queryBtn").click(function () {
			$("#myTable").bootstrapTable("refresh");
		});

		$("#addBtn").click(function () {
			window.parent.showUserDetail();
		});
	});
  </script>
</head>
<body>
	<div class="container-fluid">
		<form id="queryForm" class="row pt-2">
			<div class="col-3"><input type="text" class="form-control" placeholder="账号" name="code"/></div>
			<div class="col-3"><input type="text" class="form-control" placeholder="姓名" name="name"/></div>
		</form>
		<div class="row p-2 w-25" id="toolbar">
			<div class="col-3"><button class="btn btn-primary" id="addBtn">添加</button></div>
			<div class="col-3"><button class="btn btn-primary" id="queryBtn">查询</button></div>
		</div>
		<table class="table table-sm table-hover table-bordered table-striped" id="myTable" data-bs-toggle="table"></table>
	</div>
</body>
</html>
